<template>
  <div>
    <header>
      <span>起点中文网</span>
      <div class="fix">
        <span>男生</span>
        <span>女生</span>
      </div>
      <div class="right">
        <van-icon name="friends-o" />
        <van-icon name="apps-o" />
      </div>
    </header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="list">
      <a>
        <van-icon name="bars" />分类
      </a>
      <a>
        <van-icon name="bars" />排行榜
      </a>
      <a>
        <van-icon name="bars" />免费
      </a>
      <a>
        <van-icon name="bars" />完本
      </a>
      <a>
        <van-icon name="bars" />大神
      </a>
    </div>
    <h3>
      热门小说
      <span>起点编辑推荐</span>
    </h3>
    <div class="book">
      <dl v-for="item in book" :key="item.id">
        <dt>
          <img :src="item.img" alt @click="detail(item)" />
        </dt>
        <dd>
          <p>{{item.name}}</p>
          <p>{{item.title}}</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import book from "../mock/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      value: ""
    }
  },
  created() {
    this.$store.commit("book", book);
  },
  computed: {
    ...mapState(["book"])
  },
  methods: {
    detail(item) {
      console.log(item);
      this.$router.push({
        path: "/detail",
        query: {
          item
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  .fix {
    span {
      border: 1px solid red;
      color: red;
      padding: 5px;
    }
  }
}
.right {
  color: red;
  font-size: 18px;
  van-icon {
    margin: 0 15px;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.list {
  display: flex;
  justify-content: space-between;
  a {
    width: 18%;
    text-align: center;
    overflow-y: scroll;
    flex: 1;
    flex-grow: 1;
  }
}
img {
  width: 80px;
  height: 100px;
}
.book {
  display: flex;
  justify-content: space-between;
  flex-wrap: none;
  overflow-x: scroll;
  dl {
    margin: 10px;
  }
  dd {
    text-align: center;
  }
}
</style>